<!DOCTYPE html>
<html lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Fileuploader</title>
		<!-- styles -->
		<link href="/doc/jquery.fileuploader.css" media="all" rel="stylesheet">
        <link href="/doc/layer.css" rel="stylesheet">
		<!-- js -->
		<!--<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>-->
		<script src="/doc/jquery.fileuploader.min.js" type="text/javascript"></script>
        <script src="/doc/layer.js"></script>
	</head>

	<body>
		<form method="post" enctype="multipart/form-data">
			<input type="file" name="file@INDEX@">
            <input id="filelist@INDEX@" type="hidden" name="filelist@INDEX@">
		</form>
    </body>
</html>
<script type="text/javascript">
	$(document).ready(function() {

	$('input[name="file@INDEX@"]').fileuploader({
        limit: @LIMIT@, /* 文件数量限制*/
        maxSize: 100, /* 文件总100Mb*/
        fileMaxSize: 100, /* 单个100Mb */
        extensions: @TYPE@, /* 允许的类型*/
		changeInput: '<div @STYPE@ class="fileuploader-input">' +
		                  '<div class="fileuploader-input-caption">' +
                              '<span>${captions.feedback}</span>' +
                          '</div>' +
                          '<div class="fileuploader-input-button">' +
                              '<span>${captions.button}</span>' +
                          '</div>' +
                      '</div>',
		inputNameBrackets: true,
        theme: 'default',
        thumbnails: {
			box: '<div class="fileuploader-items">' +
                      '<ul class="fileuploader-items-list"></ul>' +
                  '</div>',
			boxAppendTo: null,
			item: '<li class="fileuploader-item">' +
                       '<div class="columns">' +
                           '<div class="column-thumbnail">${image}</div>' +
                           '<div class="column-title">' +
                               '<div title="${name}">${name}</div>' +
                               '<span>${size2}</span>' +
                           '</div>' +
                           '<div class="column-actions">' +
                               '<a class="fileuploader-action fileuploader-action-remove" title="删除"><i></i></a>' +
                           '</div>' +
                       '</div>' +
                       '<div class="progress-bar2">${progressBar}<span></span></div>' +
                   '</li>',
            item2: '<li class="fileuploader-item">' +
                        '<div class="columns">' +
                            '<a href="${data.url}" target="_blank">' +
                                '<div class="column-thumbnail">${image}</div>' +
                                '<div class="column-title">' +
                                    '<div title="${title}">${name}</div>' +
                                    '<span>${size2}</span>' +
                                '</div>' +
                            '</a>' +
                            '<div class="column-actions">' +
                                '<a href="${data.downurl}" class="fileuploader-action fileuploader-action-download" title="下载" download><i></i></a>' +
                                '<a @STYPE@ class="fileuploader-action fileuploader-action-remove" title="删除"><i></i></a>' +
                            '</div>' +
                        '</div>' +
                    '</li>',
			itemPrepend: false,
			removeConfirmation: true,
			startImageRenderer: true,
			synchronImages: true,
			canvasImage: {
				width: null,
				height: null
			},
			_selectors: {
				list: '.fileuploader-items-list',
				item: '.fileuploader-item',
				start: '.fileuploader-action-start',
				retry: '.fileuploader-action-retry',
				remove: '.fileuploader-action-remove'
			},
        	beforeShow: function(parentEl, newInputEl, inputEl) {

			},
			onItemShow: function(item, listEl, parentEl, newInputEl, inputEl) {
				if(item.choosed)
					item.html.find('.column-actions').prepend(
						'<a class="fileuploader-action fileuploader-action-start" title="上传"><i></i></a>'
					);
                console.log("thumbnails.onItemShow");
			},
            onItemRemove: function(itemEl, listEl, parentEl, newInputEl, inputEl) {
                itemEl.children().animate({'opacity': 0}, 200, function() {
                    setTimeout(function() {
                        itemEl.slideUp(200, function() {
                            itemEl.remove(); 
                        });
                    }, 100);
                });
                console.log("thumbnails.onItemRemove");
            },
			onImageLoaded: function(itemEl, listEl, parentEl, newInputEl, inputEl) {
                console.log("thumbnails.onImageLoaded");
			},
		},
        upload: {
            url: '/doc/uploadFile',
            data: {},
            type: 'POST',
            enctype: 'multipart/form-data',
            start: false,
            synchron: true,
            beforeSend: function(item, listEl, parentEl, newInputEl, inputEl) {
				item.upload.data= item;
				return true;
			},
            onSuccess: function(data, item, listEl, parentEl, newInputEl, inputEl, textStatus, jqXHR) {
                var result = JSON.parse(jqXHR.responseText);
                var filename = result.fileName;
                /* title 存储上传后的文件名*/
                item.title=filename;
                var downurl = result.host+"/fileUploader/downloadFile/"+filename;
                var ahtml = '<a href=\"'+downurl+'\"class="fileuploader-action fileuploader-action-download" title="下载" download><i></i></a>'+
                        '<a class="fileuploader-action fileuploader-action-remove" title="删除"><i></i></a>';
                item.html.find('.column-actions').html("");
                item.html.find('.column-actions').prepend(ahtml);
                setTimeout(function() {
                    item.html.find('.progress-bar2').fadeOut(400);
                }, 400);

                var filesString = $("#filelist@INDEX@").val();
                $("#filelist@INDEX@").val(filename+";"+filesString);

                console.log("upload.onSuccess");
            },
            onError: function(item, listEl, parentEl, newInputEl, inputEl, jqXHR, textStatus, errorThrown) {
				var progressBar = item.html.find('.progress-bar2');
				
				if(progressBar.length > 0) {
					progressBar.find('span').html(0 + "%");
                    progressBar.find('.fileuploader-progressbar .bar').width(0 + "%");
					item.html.find('.progress-bar2').fadeOut(400);
				}
                
                item.upload.status != 'cancelled' && item.html.find('.fileuploader-action-retry').length == 0 ? item.html.find('.column-actions').prepend(
                    '<a class="fileuploader-action fileuploader-action-retry" title="重试"><i></i></a>'
                ) : null;
                console.log("upload.onError");
            },
            onProgress: function(data, item, listEl, parentEl, newInputEl, inputEl) {
                var progressBar = item.html.find('.progress-bar2');
				
                if(progressBar.length > 0) {
                    progressBar.show();
                    progressBar.find('span').html(data.percentage + "%");
                    progressBar.find('.fileuploader-progressbar .bar').width(data.percentage + "%");
                }
                console.log("upload.onProgress");
            },
            onComplete: function(listEl, parentEl, newInputEl, inputEl, jqXHR, textStatus) {

				console.log("upload.onComplete");
			},
        },
        addMore: false,
        files: @FILES@ ,
        clipboardPaste: 2000,
        listInput: true,
        enableApi: true,
		listeners: {
			click: function(event) {

				console.log("listeners.click");
			}	
		},
		onSupportError: function(parentEl, inputEl) {

			console.log("onSupportError");
		},
        beforeRender: function(parentEl, inputEl) {

			console.log("beforeRender");
			return true;
		},
        afterRender: function(listEl, parentEl, newInputEl, inputEl) {

			console.log("afterRender");
		},
        beforeSelect: function(files,options, listEl, parentEl, newInputEl, inputEl) {

			console.log("beforeSelect");
			return true;
		},
        onFilesCheck: function(files, options, listEl, parentEl, newInputEl, inputEl) {

			console.log("onFilesCheck");
			return true;
		},
        onSelect: function(item, listEl, parentEl, newInputEl, inputEl) {

			console.log("onSelect");
		},
		afterSelect: function(listEl, parentEl, newInputEl, inputEl) {

			console.log("afterSelect");
		},
        onListInput: function(fileList, listInputEl, listEl, parentEl, newInputEl, inputEl) {
			var list = [];
			$.each(fileList, function(index, value) {
				list.push(value.name);
                if(typeof(value.data) != 'undefined'){
                    value.title = value.data.title;
                    if (!value.uploaded){
                        var filesString = $("#filelist@INDEX@").val();
                        $("#filelist@INDEX@").val(value.data.title+";"+filesString);
                        value.uploaded = value.data.uploaded;
                    }
                }
			});
            console.log("onListInput");
			return list;
		},
        onRemove: function(item, listEl, parentEl, newInputEl, inputEl) {
            var name = item.name;
            var filename = item.title;
            if (name.indexOf(filename) < 0){
                var filesString = $("#filelist@INDEX@").val();
                $("#filelist@INDEX@").val(filesString.replace(filename+";",""));
                $.ajax({
                    url : "/doc/delete/"+filename,
                    type : "post",
                    cache : false,
                    data : {},
                    dataType : "json",
                    success : function(data){
                    },
                    error : function(XMLHttpRequest, textStatus) {
                    }
                });
            }

			console.log("onRemove");
			return true;
		},
        onEmpty: function(listEl, parentEl, newInputEl, inputEl) {
        	console.log("onEmpty");

		},
        dialogs: {
            alert: function(text) {
                return layer.msg(text, {icon: 0});
            },
            confirm: function(text, callback) {
                layer.msg('删除成功', {icon: 1})? callback() : null;
            }
        },
        captions: {
            button: function(options) { return '选择文件'; },
            feedback: function(options) { return 'Choose ' + (options.limit == 1 ? 'file' : 'files') + ' to upload'; },
            feedback2: function(options) { return options.length + ' ' + (options.length > 1 ? ' files were' : ' file was') + ' chosen'; },
            drop: '拖拽文件上传',
            paste: '<div class="fileuploader-pending-loader"><div class="left-half" style="animation-duration: ${ms}s"></div><div class="spinner" style="animation-duration: ${ms}s"></div><div class="right-half" style="animation-duration: ${ms}s"></div></div> 粘贴一个文件, 点击取消',
            removeConfirmation: '确定删除该文件？',
            errors: {
                filesLimit: '最多上传${limit}个文件',
                filesType: '只允许上传 ${extensions} 类型的文件',
                fileSize: '${name}大小超过了${fileMaxSize}MB',
                filesSizeAll: '所有的文件的大小超过了${maxSize}MB',
                fileName: '${name}文件已经选择了',
                folderUpload: '不允许上传文件夹'
            }
        }
	});
	
});

</script>